<template>
	<view style="height: 100%">
		<view class="top_container">
			<view class="top_title f600">
				<view class="f22 mb5">成为夕腾采购商</view>
				<view class="f18">为企业降本增效</view>
			</view>
			<view class="top_img">
				<image style="width:420rpx" :src="getImgSrc('/uploads/20241104/173068547767282a255224a.jpg')"
					mode="widthFix"></image>
			</view>
		</view>
		<view v-if="!is_examine">
			<view class="pd015 f16 f600">请填写以下信息</view>
			<ul class="db bgcf pd015 mt10">
				<li class="df ac sb h48 bbf1">
					<span class="f14 cf5">*</span>
					<p class="f14 c28">企业名称</p>
					<input class="tr f1 ml15 f14 c28" @input="onInput" data-i="0" :value="val[0]" placeholder="请填写贵公司名称"
						placeholder-class="cc" />
					<!-- <input class="tr f1 ml15 f14 c28" @input="onInputYY" data-i="0" :value="val[0]"
						placeholder="请填写贵公司名称" placeholder-class="cc" />
					<view class="passed">
						<image @click.stop="gongS" v-if="!isPassed" style="width: 100%;height: 100%;"
							src="@/static/icon/not_passed.png" mode="widthFix"></image>
						<image @click.stop="gongS" v-else style="width: 100%;height: 100%;"
							src="@/static/icon/passed.png" mode="widthFix">
						</image>
						<view v-show="gongShow" class="pd_tab">
							<image v-if="isPassed" src="../../static/已通过.png" mode="aspectFit"></image>
							<image v-else src="../../static/未通过.png" mode="aspectFit"></image>
						</view>
					</view> -->
				</li>
				<view class="search-D" v-if="SySeach==true">
					<view @click="SySeach=false" v-if="Result" class="" style="padding: 6px 0 6px 6px;"> 关闭 </view>
					<view v-for="(item,index) in Result" :key="index" class="">
						<view class="titleName" @click="selectName(item.Name)">
							{{item.Name}}
						</view>
					</view>
				</view>
				<li class="df ac sb h48 bbf1">
					<span class="f14 cf5">*</span>
					<p class="f14 c28">联系人</p>
					<input class="tr f1 ml15 f14 c28" @input="onInput" data-i="1" :value="val[1]" placeholder="联系人名称"
						placeholder-class="cc" />
				</li>
				<li class="df ac sb h48 bbf1">
					<span class="f14 cf5">*</span>
					<p class="f14 c28">联系方式</p>
					<input class="tr f1 ml15 f14 c28" @input="onInput" data-i="2" :value="val[2]" type="number"
						placeholder="手机号" placeholder-class="cc" />
				</li>
				<!-- <li class="df ac sb h48">
					<p class="f14 c28"><image src="@/static/success.png" mode="widthFix" style="height: 70rpx;width: 70rpx;"></image></p>
					<input class="tr f1 ml15 f14 c28" @input="onInput" data-i="3" :value="val[3]" placeholder="微信或其它联系方式"
						placeholder-class="cc" />
				</li> -->
				<li class="df ac sb h48 bbf1">
					<span class="f14 cf5">*</span>
					<p class="f14 c28">职位</p>
					<input class="tr f1 ml15 f14 c28" @input="onInput" data-i="3" :value="val[3]" placeholder="请填写您的职位"
						placeholder-class="cc" />
				</li>
				<li class="df ac sb h48 bbf1">
					<span class="f14 cf5"></span>
					<p class="f14 c28">
						<image style="width:60rpx;max-height:49rpx"
							:src="getImgSrc('/uploads/20241125/17325049426743ed6eaae34.jpg')" mode="widthFix" />
					</p>
					<input class="tr f1 ml15 f14 c28" @input="onInput" data-i="4" :value="val[4]" placeholder="请填写"
						placeholder-class="cc" />
				</li>
			</ul>
			<view class="pd015">
				<view class="mt15 df ac">
					资料文件
					<span class="f12" style="color: red;">*可上传名片或企业资料等相关资料，增加信任度</span>
				</view>
				<view class="mt15 df ac sb">
					<image class="w166" src="https://cdn.xtwaixie.com/uploads/20241227/1735285532676e5b1c95842.png"
						mode="widthFix" @tap="upImgArr"></image>
					<image class="w166" src="https://cdn.xtwaixie.com/uploads/20240705/17201796166687dba0904a2.png"
						mode="widthFix" @tap="upFile"></image>
				</view>
				<ul class="df ac fw mt15" v-if="drawing.length != 0">
					<block v-for="(it, index) in drawing" :key="index">
						<li class="mb8 mr8 img64 pr db">
							<image class="img64" referrerPolicy='no-referrer' :src="getImgSrc(it)" />
							<image class="img-del" src="https://wx.xtwaixie.com/img/del.png"
								@tap="drawing.splice(index, 1)" />
						</li>
					</block>
				</ul>
				<view class="h44 mt8 bgcf7 df ac pd015" v-if="file.length != 0" v-for="(it, index) in file"
					:key="index">
					<image class="img16" src="https://wx.xtwaixie.com/img/file.png"></image>
					<p class="ml8 f14 c28 f1">{{ it.name }}</p>
					<image class="img16" src="https://wx.xtwaixie.com/img/del3.png" @tap="onDelFile(index)"
						:data-i="index"></image>
				</view>
			</view>
			<view class="mt25 df ac jc">
				<van-checkbox :value="is_check" @change="onChange" icon-size="19px">
					<p class="f14 c28" style="font-size: 26rpx !important;">请阅读并同意</p>
				</van-checkbox>
				<navigator class="f14 c10" url="/pages/about/about?type=12" hover-class="none" open-type="navigate"
					style="line-height: 40rpx;font-size: 26rpx !important;">《用户服务协议》</navigator>
				<text class="f14 c28" style="line-height: 40rpx;font-size: 26rpx !important;">和</text>
				<navigator class="f14 c10" url="/pages/about/about?type=2" hover-class="none" open-type="navigate"
					style="line-height: 40rpx;font-size: 26rpx !important;">《隐私政策》</navigator>
			</view>
			<view style="height:180rpx;" v-if="drawing.length != 0 || file.length != 0"></view>
			<view class="pd15 bgcf mt15">
				<button class="sub" @tap="onSub">保存并提交</button>
			</view>
		</view>
		<view v-else style="padding:30rpx;">
			<view class="box">
				<view class="box_top df ac sb">
					<view style="color: #AFB4C1;">
						申请时间：{{ info.apply_time || ''}}
					</view>
					<!-- <view style="color: #1050c7;">
						审核中
					</view> -->
					<view class="f14 f500 c10" v-if="cg_status == 1">审核中</view>
					<view class="f14 f500 cf5" v-if="cg_status == 3">未通过</view>
					<view class="f14 f500 c3a" v-if="cg_status == 2">已通过</view>
				</view>
				<view style="padding:20rpx 0rpx;">
					<view class="f18 f600">
						{{ info.company || ''}}
					</view>
					<view class="caf mb10 mt20">
						联系人：{{ info.username || ''}}
					</view>
					<view class="caf">
						职位：{{ info.job || ''}}
					</view>
				</view>
			</view>
			<view class="pob pd715 mb20">
				<button class="sub" v-if="cg_status != 1" @tap="onAgain">重新提交</button>
				<button class="sub" v-else @tap="onBack">返回</button>
			</view>
		</view>
		<toast :value='showToast' title='微信禁止电脑端小程序上传文件' :ifHtml='true'
			content='1、可将文件发送至“文件传输助手”微信，通过手机上传文件发布。<br/>2、不上传文件发布。后添加微信xtwaixie，平台补充上传图纸文件。' btnText='知道了'
			@change='showToast=false' />
	</view>
</template>

<script>
	import http from '../../utils/http';
	import {
		toast
	} from "@/component/toast.vue"
	export default {
		components: {
			toast
		},
		data() {
			return {
				val: ['', '', '', '', '', ''],
				is_check: true,
				drawing: [],
				file_name: [],
				file: [],
				showToast: false,
				is_examine: false,
				info: null,
				cg_status: 0,
				isPassed: false,
				SySeach: false,
				gongShow: false,
				Result: [],
				timer: null,
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad(options) {
			// if (options.nickname) {
			// 	this.setData({
			// 		[`val[0]`]: options.company,
			// 		[`val[1]`]: options.name,
			// 		[`val[2]`]: options.mobile,
			// 		[`val[3]`]: options.email
			// 	});
			// }
			
			this.getUserInfo()

		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage() {},
		methods: {
			selectName(name) {
				this.SySeach = false
				this.isPassed = true
				this.setData({
					[`val[${0}]`]: name
				});
			},
			gongS() {
				this.gongShow = !this.gongShow;
			},
			onInputYY(e) {
				console.log(e.detail.value)
				if (this.SySeach = true) {
					this.isPassed = false;
				}
				const val = e.detail.value;
				const i = e.currentTarget.dataset.type;
				this.setData({
					[`val[${i}]`]: val,
				});
				// 清除之前的定时器
				if (this.timer) {
					clearTimeout(this.timer);
				}
				// 设置新的定时器，延迟500毫秒后执行
				this.timer = setTimeout(() => {
					if (val.length >= 4) {
						this.SySeach = true;
						http.request("user/qichacha", {
							name: val
						}).then((res) => {
							console.log(res.data.Result.Data);
							this.Result = res.Result.Data;
							console.log(res.Result.Data);
						}).catch((err) => {
							this.Result = err.Result.Data;
							console.log(err.Result.Data);
						});
					} else {
						this.isPassed = false;
						this.SySeach = false
					}
				}, 500); // 延迟时间可以根据需要调整
			},
			getUserInfo() {
				http.request('user/userInfo').then(res => {
					this.info = res.data.userInfo
					this.is_examine = this.info.cg_status != 2 && this.info.cg_status != 0
					this.cg_status = this.info.cg_status
					this.drawing = JSON.parse(res.data.userInfo.drawing) || []
					this.file = JSON.parse(res.data.userInfo.file) || []
					this.setData({
						[`val[0]`]: res.data.userInfo.company,
						[`val[1]`]: res.data.userInfo.username,
						[`val[2]`]: res.data.userInfo.mobile,
						[`val[3]`]: res.data.userInfo.job,
						[`val[4]`]: res.data.userInfo.wexin,
					});
				})
			},
			onAgain() {
				this.is_examine = false
			},
			onBack() {
				// uni.redirectTo({
				// 	url: "/pages/my/my"
				// })
				uni.navigateBack({
					delta: 1
				})
			},
			onChange(e) {
				this.is_check = e.detail
			},
			onInput(e) {
				let i = e.currentTarget.dataset.i;
				let val = e.detail.value;
				this.setData({
					[`val[${i}]`]: val
				});
			},
			onSub() {

				// 判断手机是否登录
				let token = uni.getStorageSync('token')
				// console.log(token)
				if (!token) {
					// console.log(1111111)
					uni.navigateTo({
						url: '/pages/login/login'
					});
					return
				}
				if (!this.val[0]) {
					uni.showToast({
						title: '请填写企业名称',
						icon: 'none'
					})
					return
				}

				if (!this.val[1]) {
					uni.showToast({
						title: '请填写联系人',
						icon: 'none'
					})
					return
				}

				let phoneReg = /^1\d{10}$/;
				if (!phoneReg.test(this.val[2])) {
					uni.showToast({
						title: '填写手机号位数不对',
						icon: 'none'
					})
					return
				}

				if (!this.val[3]) {
					uni.showToast({
						title: '请填写职位',
						icon: 'none'
					})
					return
				}

				if (!this.is_check) {
					uni.showToast({
						title: '请阅读并勾选用户协议、隐私政策',
						icon: 'none'
					})
					return
				}

				let that = this
				uni.requestSubscribeMessage({
					tmplIds: ['5SQbIg20NgfTt5-y7GY8BRzxqvrinsp-GnKzQIPcNPo'],
					complete(res) {
						let data = {
							company: that.val[0],
							username: that.val[1],
							// email: that.val[3],
							company_tel: that.val[2],
							job: that.val[3],
							wexin: that.val[4],
							file: that.file,
							drawing: that.drawing
						};
						http.request('user/addPurchase', data)
							.then((res) => {
								uni.showToast({
									title: res.message,
									icon: "none"
								});
								setTimeout(() => {
									uni.reLaunch({
										url: '/subPack/editSuccess/editSuccess?fromPage=/subPack/editSuccess/editSuccess'
									});
								}, 600)
							})
							.catch((res) => {
								uni.showToast({
									title: res.message,
									icon: 'none'
								});
							});
					}
					// 	http.request('user/editCompany', data)
					// 		.then((res) => {
					// 			uni.showToast({
					// 				title: res.message,
					// 				icon: "none"
					// 			});
					// 			setTimeout(() => {
					// 				uni.navigateBack({
					// 					delta: 1
					// 				});
					// 			}, 1000);
					// 		})
					// 		.catch((res) => {
					// 			uni.showToast({
					// 				title: res.message,
					// 				icon: 'none'
					// 			});
					// 		});
					// }
				})

			},
			onDelFile(index) {
				this.file.splice(index, 1);
				this.file_name.splice(index, 1);
			},
			upImgArr(e) {
				let that = this;
				uni.chooseImage({
					count: '9',
					sizeType: ['original'],
					success(res) {
						uni.showLoading({
							title: '上传中'
						});
						for (let j = 0; j < res.tempFilePaths.length; j++) {
							http.upLoadFile('base/uploadImg', 'image', res.tempFilePaths[j], {}).then((res) => {
								console.log(res)
								that.drawing.push(res.data.url);
								console.log(that.drawing)
								uni.hideLoading();
							}).catch((res) => {
								uni.hideLoading();
								uni.showToast({
									title: res.message,
									icon: 'none'
								});
							});
						}
					},
					fail() {
						uni.hideLoading();
					}
				});
			},
			upFile(e) {
				// let i = e.currentTarget.dataset.i;
				// let idx = e.currentTarget.dataset.idx;
				let that = this;
				wx.getSystemInfo({
					success: (res) => {
						if (res.platform == 'android' || res.platform == 'ios') {
							uni.chooseMessageFile({
								count: 9,
								type: 'file',
								success(res) {
									uni.showLoading({
										title: '上传中'
									});
									let up_length = 0;
									let list_length = res.tempFiles.length;
									for (let j = 0; j < res.tempFiles.length; j++) {
										let tempFiles = res.tempFiles[j];
										http.upLoadFile('base/getFile', 'file', tempFiles.path, {})
											.then((res) => {
												up_length = up_length + 1;
												const data = {
													name: tempFiles.name,
													url: res.data.file
												}
												that.file.push(data)
												that.file_name.push(tempFiles.name);
												if (up_length == list_length) {
													uni.hideLoading();
												}
											}).catch((res) => {
												uni.hideLoading();
												uni.showToast({
													title: res.message,
													icon: 'none'
												});
											});
									}
								},
								fail(res) {
									uni.hideLoading();
								}
							});
						} else {
							this.showToast = true
						}
					}
				});
			},
		}
	};
</script>
<style>
	@import './editInfo.css';

	.search-D {
		position: absolute;
		/* top: 120%; */
		background: white;
		width: 100%;
		z-index: 12;
		box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .1);
		border-radius: 0 0 10px 10px;
		font-size: 14px;
		display: flex;
		flex-direction: column;
	}

	.titleName {
		line-height: 30px;
		padding: 6px 0 6px 6px;
		border-bottom: 1px solid gainsboro;
	}

	.passed {
		position: relative;
		width: 50rpx;
		height: 50rpx;
		margin-left: 15rpx;
	}
</style>